<template>
	<view class="container">
		<view class="fodders-box">
			<view class="video-Box">
				<view v-for="(item,index) in kongCatList" :key="index" class="lists" @click="preview(item)">
					<image :class="{'mask':selectedKong.some(asc => asc.mediaId === item.mediaId)}" :src="item.coverUrl"
						v-if="item.coverUrl" mode="widthFix"></image>
					<view @click.stop="playVideo(item.mediaId)" class="playBtn">
						<image :src="imageUrl + 'index/play-index.png'" mode="aspectFit"></image>
					</view>
					<image v-show="selectedKong.some(asc => asc.mediaId === item.mediaId)" class="maskicon"
						:src=" imageUrl + 'xuanzhong.png'" mode=""></image>
					<p @click.stop="toDetele(item, index)">
						<span>
							<i>
								<span>{{timesModes(item.duration) + '"'}}</span>
							</i>
							<i>
								<uni-icons type="close"></uni-icons>
							</i>
							<!-- <i style="color: #ffffff;">{{item.time}}</i> -->
						</span>
					</p>
				</view>
			</view>
		</view>
		
		<!-- 视频播放弹窗 -->
		<uni-popup ref="popupskiingVideo" class="skiingVideo-Box">
			<view class="skiingVideo-list">
				<view class="title">
					<uni-icons type="closeempty" @click="toCloseVideo()"></uni-icons>
					<span>素材预览</span>
				</view>
				<video style="width: 100%;" v-if="videoUrl" :src="videoUrl"></video>
				<view class="shuiyin" @click='videoOpreation'>哇咔咔wakaka</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		getSnowToken,
		setKongList,
		getKongList,
		setMealData,
		getUserData,
	} from '@/utils/storage.js'
	import {
		getCreateMedia,
		getMediaInfoi,
		searchMedia
	} from '@/api/service.js'
	import videoPlay from '@/pages/index/components/video-play/video-play.vue'
	import imageConfig from '@/utils/images.js'
	export default {
		props:['kongCatList'],
		components: {
			videoPlay,
		},
		data() {
			return {
				videoUrl: '',
				imageUrl:imageConfig.uploadImageUrl,
				// 选中的素材
				selectedKong: [],
				mealIcon:[],
			}
		},

		methods: {
			getKongListInfo() {
				this.kongCatList = getKongList()
				console.log(this.kongCatList,'1010')
			},
			// 删除购物车里的素材
			toDetele(item, index) {
				this.kongCatList.splice(index, 1)
				setKongList(this.kongCatList)
			},

			// 删除订单
			toDetele(item) {
				const index = this.kongCatList.findIndex(function(acd) {
					return acd.mediaId === item.mediaId;
				});
				uni.showModal({
					title: '删除素材',
					content: '确定删除该素材?',
					confirmText: '确定',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							// 用户点击了确定按钮，执行删除操作
							this.kongCatList.splice(index, 1)
							// 同步到本地存储
							setKongList(this.kongCatList)
							// 同时删除购物车的素材
							this.selectedKong = this.selectedKong.filter(i => i.mediaId !== item.mediaId)
						}
					}
				})
			},

			// 选中的素材
			preview(item) {
				if (this.selectedKong.some(acs => acs.mediaId === item.mediaId)) {
					// this.selectedKong.splice(item,1)
					this.selectedKong = this.selectedKong.filter(i => i.mediaId !== item.mediaId)
					this.$emit('myEvent', this.selectedKong)
					return
				}
				this.selectedKong.push(item)
				console.log(this.selectedKong, 'selectedKong000')
				// this.$emit("selectedKong", this.selectedKong)
				this.$emit('myEvent', this.selectedKong)
			},
			
			// 播放视频
			playVideo(id) {
				// this.indexVideo = video
				getMediaInfoi({
					Action: 'GetMediaInfo',
					userId: getUserData().id,
					mediaId: id,
					urlUseage: 'Play'
				}).then(res => {
					this.videoUrl = res.GetMediaInfoResult.MediaInfo.FileInfoList[0].FileBasicInfo.FileUrl
					console.log(this.videoUrl,'000')
				})
				this.$refs.popupskiingVideo.open("bottom")
			},
			// 关闭素材弹窗
			toCloseVideo() {
				this.$refs.popupskiingVideo.close()
				this.videoUrl = ''
			},
			timesModes(time){
				const times = new Date(time * 1000).toISOString().substr(14, 5).replace(
					':', "'")
				return times
			},

		}
	}
</script>
<style lang="less">
	// 去掉uniPopup的padding
	.vue-ref {
		padding: 0 !important;
	}
</style>
<style lang="less" scoped>
	.container {
		
		.skiingVideo-list {
			border-radius: 20rpx 20rpx 0 0;
			background-color: #ffffff;
			padding: 0 10rpx 60rpx 10rpx;
			text-align: center;
			box-sizing: border-box;
			position: relative;
		
			.skiingVideo-button {
				position: absolute;
				top: 40%;
				right: 30rpx;
				bottom: 100rpx;
				display: flex;
				flex-direction: column;
				// align-items: center;
				// justify-content: flex-start;
				padding: 20rpx 0;
				align-items: center;
				font-size: 32rpx;
				color: #929292;
				text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff; //设置发光效果
		
				view {
					text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff; //设置发光效果
					font-weight: 600;
				}
		
				/deep/.uni-icons {
					font-size: 70rpx !important;
					color: #fff !important;
		
				}
		
				&.active {
					color: #4CA2EC;
		
					/deep/.uni-icons {
						font-size: 70rpx !important;
						color: #4CA2EC !important;
					}
				}
			}
			.shuiyin{
				position: absolute;
				width: 300rpx;
				height: 10rpx;
				left:30rpx;
				top:180rpx;
				color: #ffffff;
				font-size: 45rpx;
				opacity: 0.6;
				transform: rotate(-30deg);
				text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff; //设置发光效果
			}
			.title {
				margin-top: 8VH;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				// position: relative;
				
				/deep/.uni-icons {
					position: absolute;
					left: 20rpx;
					top: 0;
				}
			}
		
			.videoBox {
				video {
					width: 100%;
				}
			}
		
			.btn {
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
		
				.dontMe {
					font-size: 25rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #FFFFFF;
					line-height: 54rpx;
					width: 236rpx;
					height: 54rpx;
					background: #B0B0B0;
					border-radius: 27rpx;
				}
		
				.addSucai {
					font-size: 25rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #FFFFFF;
					line-height: 54rpx;
					width: 236rpx;
					height: 54rpx;
					background: #A7CCEF;
					border-radius: 27rpx;
				}
			}
		}

		.fodders-box {
			// padding-bottom: 200rpx;
			margin: 0 40rpx;
		
			.video-Box {
				// padding-bottom: 100rpx;
				width: 100%;
				margin-top: 20rpx;
				columns: 2; // 默认列数
				column-gap: 20rpx; // 列间距
		
				.lists {
					position: relative;
					overflow: hidden;
					border-radius: 18rpx;
					width: 320rpx;
					break-inside: avoid;
					margin-bottom: -30rpx;
					
					.playBtn {
						position: relative;
						right: -240rpx;
						top: -160rpx;
											
						image {
							width: 50rpx;
							height: 50rpx;
						}
					}
		
					.mask {
						position: relative;
					}
		
					.mask::before {
						content: "";
						display: block;
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background-color: rgba(0, 0, 0, 0.5);
						opacity: 0.8;
					}
		
					.mask::before image {
						width: 50rpx;
						height: 50rpx;
					}
		
					.maskicon {
						position: absolute;
						top: 40%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 50rpx;
						height: 50rpx;
					}
		
					.play {
						position: absolute;
						right: 15rpx;
						top: 15rpx;
						width: 22rpx;
						height: 22rpx;
						background: #4E4E4E;
						opacity: 0.8;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						transform: rotate(30deg);
		
						i {
							width: 6rpx;
							height: 6rpx;
							border-bottom-left-radius: 2rpx;
							background-color: rgba(255, 255, 255, 0.8);
							transform: rotate(-60deg) skewX(-30deg) scale(1, .866);
		
							&::before,
							&::after {
								content: "";
								position: absolute;
								background-color: inherit;
								width: 6rpx;
								height: 6rpx;
								border-bottom-left-radius: 2rpx;
							}
		
							&::before {
								transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(-50%, 0);
							}
		
							&::after {
								transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0%, 50%);
							}
						}
					}
		
					video {
						width: 100%;
					}
		
					image {
						width: 100%;
					}
		
					p {
						position: absolute;
						right: 0;
						top: 130rpx;
						// bottom: 0;
						// bottom: 28%;
						width: 100%;
						display: flex;
						align-items: flex-end;
						overflow: hidden;
		
						span {
							height: 50rpx;
							font-size: 50rpx;
							font-family: Adobe Heiti Std;
							font-weight: normal;
							// margin-bottom: 15rpx;
		
							width: 100%;
							background: rgba(0,0,0,0.5);
							font-size: 20rpx;
							font-family: Adobe Heiti Std;
							font-weight: normal;
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding-right: 20rpx;
							color: #ffffff;
							
							span {
								margin-top: 15rpx;
								margin-left: 20rpx;
								background-color: rgba(0, 0, 0, 0);
							}
		
							i {
								align-items: center;
								color: #ffffff;
		
								/deep/.uni-icons {
									font-size: 35rpx !important;
									color: #ffffff !important;
									margin-right: 15rpx;
								}
							}
		
						}
					}
				}
			}
		}

		.tButton {
			position: fixed;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// top: 0;
			bottom: 0;
			width: 749rpx;
			height: 181rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -6rpx 13rpx 0rpx rgba(0, 0, 0, 0.2);
			border-radius: 36rpx 36rpx 0rpx 0rpx;

			.left {
				margin-left: 18rpx;

				font-size: 22rpx;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				color: #858585;
				line-height: 82rpx;

			}

			.right {
				margin-right: 18rpx;

				button {
					width: 254rpx;
					height: 72rpx;
					background: #A7CCEF;
					border-radius: 36rpx;

					font-size: 27rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #FFFFFF;
				}
			}
		}
	}
</style>